{% extends "base.html" %}
{% block content %}
<script type="text/javascript">
//    $(function () {
//        var yml_name = $('#yml_name option:selected').html();
//        $("#yml_name").change(function () {
//        yml_name = $(this).find("option:selected").html();
//        $.post("/hosts_maintain",{"yml_name":yml_name});
//    });
//  });

    function update_file(bean) {
        var file_text = $('#file_text').val();
        var yml_name = $('#fileName').val();
        $.ajax({
            type: "POST",
            url: "/hosts_maintain",
            data:{
                "file_text": file_text,
                "yml_name": yml_name
            },

            success: function(){
                swal({
                    title: "更新成功！",
                    text: "已写入文件",
                    timer: 500,
                    showConfirmButton: false
                },
                        function () {
                        setTimeout(function(){
                            window.location.reload();
                        }, 500);
                });
            },
            error: function () {
                alert("异常！");
            },
        })
    }


    $(function () {
        $("#des .btn").click(function(e){
            e.preventDefault();
            $.post("/hosts_maintain", {'button_index' : $("#des .btn").index(this)}
            );
        });
    });

    function yml(bean) {
        var yml_name = $(bean).text();
        $.ajax({
            type: "POST",
            url: "/hosts_maintain_yml",
            data:{
                "yml_name": yml_name
            },
            success: function(data){
                $("#file_text").val(data.all_the_text);
                $("#fileName").val(yml_name);
            },
            error: function () {
                alert("异常！");
            },
        })
    }
</script>

<form role="form" action="" method="post">
    <input type="hidden" id="fileName" value="hosts">
    <div class="row">
        <div class="col-xs-4 col-xs-offset-0" id="des">
            <ul class="nav navbar-nav" contenteditable="false">
                    <li><a href="/hosts_maintain">Hosts文件信息</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">YML文件信息 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        {% for file_name in file_list %}
                        <li><a href="#" onclick="yml(this);">{{ file_name }}</a></li>
                        {% endfor %}
                    </ul>
                    </li>
            </ul>
        </div>

        <div class="col-xs-8">
            <h4><i>Ansible Shell</i><sub><i class="text-danger">    WARNING：此功能使用ansible调用shell模块直接操作服务器，请谨慎操作！</i></sub></h4>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <HR>
            <textarea id="file_text" class="form-control" rows="10">{{ all_the_text }}</textarea>
            <button type="button" class="btn btn-primary col-xs-offset-10" onclick="update_file();">更新</button>
        </div>
        <div class="col-xs-8">
            <HR>
            {{ ansibleform.hidden_tag() }}
            <div class="row col-xs-8 form-group">
                    <div class="col-xs-5">
                        {{ ansibleform.ansible_groupname(class="form-control", placeholder="输入组名或IP") }}
                    </div>
                    <div class="col-xs-6">
                        {{ ansibleform.ansible_shell(class="form-control", placeholder="输入shell命令") }}
                    </div>
                <div class="col-xs-1">
                    <button class="btn btn-primary" value="执行">执行</button>
                 </div>
            </div>
        </div>
        <div class="col-xs-8">
            {% if output != null %}
                <h5><pre>{{ output }}</pre></h5>
            {% else %}
                <i class="text-muted">执行结果显示区域</i>
            {% endif %}
        </div>
    </div>
</form>

{% endblock %}


